<template>
  <div class="EmplymentEvaluation">
    <van-steps :active="setpActive">
      <van-step>填写学号</van-step>
      <van-step>查看/上传图片</van-step>
      <van-step>done</van-step>
    </van-steps>

    <van-cell-group>
      <van-field
        v-if="setpActive === 0"
        v-model="sNo"
        label="学号"
        type="digit"
        placeholder="请输入学号"
      />
      <van-field v-if="setpActive === 1" name="uploader" label="满意度截图">
        <template #input>
          <van-uploader v-model="imgUrlList" :max-count="1"></van-uploader>
        </template>
      </van-field>
      <div v-if="setpActive === 2">
        <p style="text-align: center; padding: 20px">提交完成, 谢谢配合</p>
      </div>
    </van-cell-group>

    <van-row gutter="20" justify="center" style="margin: 20px 0">
      <van-col span="6">
        <van-button
          plain
          type="primary"
          @click="setpBack"
          v-if="setpActive !== 0 && setpActive !== 2"
          >上一步</van-button
        >
      </van-col>
      <van-col span="6">
        <van-button
          plain
          type="primary"
          @click="setpNext"
          v-if="setpActive !== 2"
          >下一步</van-button
        >
      </van-col>
    </van-row>
  </div>
</template>

<script lang="ts">
import { defineComponent, inject, ref } from "vue";
import { useLoading } from "@/store/useLoading";
import { getEvaluationBySNo, submitEvaluation } from "@/api";

export default defineComponent({
  name: "EmplymentEvaluation",
  // 注册你的组件
  components: {},
  props: {},
  setup(props, { attrs, slots, emit }) {
    let loadingStore = useLoading()
    console.log(loadingStore)

    let Notify = inject("Notify") as any;

    let setpActive = ref(0);

    let sNo = ref("");
    let imgUrlList = ref<any>([]);

    function setpBack() {
      if (loadingStore.loadingFlag) {
        return false;
      }
      if (setpActive.value > 0) {
        setpActive.value--;
      } else {
        setpActive.value = 0;
      }
    }
    async function setpNext() {
      if (loadingStore.loadingFlag) {
        return false;
      }
      loadingStore.openLoading()
      if (setpActive.value === 0) {
        let url = "";
        await getEvaluationBySNo({ sno: sNo.value }).then(({ data }) => {
          if (data) {
            url = `http://${location.hostname}:3000${String(data)}`;
          }
        });
        if (url) {
          imgUrlList.value = [{ url }];
        } else {
          imgUrlList.value = [];
        }
      } else if (setpActive.value === 1) {
        if (!imgUrlList.value[0]) {
          Notify({ type: "warning", message: "请上传截图" });
          return false;
        } else {
          if (imgUrlList.value[0] && imgUrlList.value[0].file) {
            let formData = new FormData();
            formData.append("sno", sNo.value);
            formData.append("file", imgUrlList.value[0].file);
            await submitEvaluation(formData);
          }
        }
      }

      if (setpActive.value < 2) {
        setpActive.value++;
      } else {
        setpActive.value = 2;
      }
      loadingStore.closeLoading()
    }

    return {
      setpActive,
      sNo,
      imgUrlList,
      setpBack,
      setpNext,
    };
  },
});
</script>

<style scoped>

</style>
